<script setup lang="ts">
import { useTransition } from "@vueuse/core";
import { ElText } from "element-plus";
import { computed } from "vue";
import { useRouter } from "vue-router";

const props = defineProps<{
  data: any;
  config: any;
}>();

const valueStyle = { fontSize: "30px", fontWeight: "bold" };

const val = computed(() => {
  const { data, config } = props;
  if (data) return Reflect.get(data, `${config.key}_total`);
  return 0;
});

const renderVal = useTransition(val);

const router = useRouter();
function navigate(e: any) {
  if (e.target.className == "el-statistic__number") {
    handleSubnav(props.config.url);
  }
}

function handleSubnav(url: string) {
  url && router.push(url);
}
</script>

<template>
  <ElCard
    :style="{
      background: `linear-gradient(to bottom right, ${config.colors[0]},${config.colors[1]})`,
    }"
  >
    <div class="relative flex items-center">
      <img
        class="absolute -bottom-[20px] -right-[10px] w-[60px] opacity-20 -rotate-12"
        :src="config.img"
      />

      <div class="flex-auto">
        <ElStatistic
          :value="renderVal"
          :valueStyle="valueStyle"
          @click="navigate"
        >
          <template #title>
            <div class="flex items-center mb-2 text-xl font-bold">
              {{ config.label }}
            </div>
          </template>
        </ElStatistic>
        <!-- <div class="flex items-center mt-3 text-sm">
          <span>较上月</span>

          <ElText type="success" class="ml-2">
            <span class="font-bold">
              {{ data?.[`${config.name}_last_mon`] }}%
            </span>
            <el-icon><Top /></el-icon>
          </ElText>
        </div> -->
      </div>

      <div
        class="relative flex-none text-center"
        v-if="config.suburl"
        @click="handleSubnav(config.suburl)"
      >
        <div class="font-bold text-xl">
          {{ data?.[`${config.key}_apply`] }}
        </div>
        <div class="mt-1 text-xs" tag="div">审核中</div>
      </div>
    </div>
  </ElCard>
</template>
